<template>
  <div>
    <div>
      <!-- <p>
        <el-text style="color: #999">客户简称：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.CustomerName }}
        </el-text>
      </p> -->
      <p>
        <el-text style="color: #999">客户全称：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.CustomerAllName }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">所属区域：</el-text>
        <el-text style="color: #333">{{ CustomerInfos.CityShow }}</el-text>
      </p>
      <p>
        <el-text style="color: #999">地址：</el-text>
        <el-text style="color: #333">{{ CustomerInfos.Address }}</el-text>
      </p>
      <p>
        <el-text style="color: #999">电话：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.Telphone }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">法定代表人：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.LegalPerson }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">业务联系人：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.BusinessPerson }}
          {{ CustomerInfos.BusinessPersonMobile }}
        </el-text>
      </p>
    </div>
    <div>
      <el-button
        :type="isLicense > 0 ? 'success' : 'danger'"
        @click="LicenseHandle"
      >
        上传营业执照
      </el-button>
      <!-- <el-button type="warning" @click="InvoicingHandle">开票信息</el-button> -->
    </div>
    <el-divider />
    <div>
      <p>
        <el-text style="color: #999">客户所在行业：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.IndustryShow }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">主营产品：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.SalesProducts }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">主要销售区域：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.SalesArea }}
        </el-text>
      </p>
      <p>
        <el-text style="color: #999">主要客户群体：</el-text>
        <el-text style="color: #333">
          {{ CustomerInfos.CustomerGroup }}
        </el-text>
      </p>
    </div>
    <!-- <el-divider /> -->
    <div>
      <el-tag
        v-for="(itm, idx) in CustomerInfos.CustomerMarks"
        :key="idx"
        type="danger"
      >
        {{ itm }}
      </el-tag>
    </div>
    <invoicing ref="invoicingRef" />
    <license ref="licenseRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import Invoicing from '@/views/business/components/Invoicing'
  import License from '@/views/business/components/License'

  export default defineComponent({
    name: 'CustomerInfo',
    components: { License, Invoicing },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        licenseRef: null,
        invoicingRef: null,
        CustomerInfos: {},
        licenseMSG: {},
        isLicense: 0,
      })

      const showInfo = (Info, msg) => {
        state.licenseMSG = Object.assign({}, msg)
        state.isLicense = state.licenseMSG.LicensePhoto.length
        console.log(state.licenseMSG, '   state.licenseMSG')
        state.CustomerInfos = Object.assign({}, Info)
      }

      const fetchData = () => {
        console.log('走这里了')
        emit('fetch-data')
      }

      const LicenseHandle = () => {
        console.log(state.licenseMSG, 'licenseMSG')
        state.licenseRef.showEdit(state.licenseMSG)
      }

      const InvoicingHandle = () => {
        state.invoicingRef.showEdit(state.licenseMSG)
      }

      return {
        ...toRefs(state),
        showInfo,
        fetchData,
        LicenseHandle,
        InvoicingHandle,
      }
    },
  })
</script>
